<template>
  <div class="index-container-ty index-page">
    <a-spin :spinning="loading">
      <IndexHeader title="大数据分析"></IndexHeader>
      <a-row :gutter="24" class="current-date">
        <a-col :sm="24" :md="12" :xl="12">
          <span class="current-date-span">时间范围</span>
          <a-range-picker v-model="times" @change="mock" />
        </a-col>
        <a-col :sm="24" :md="12" :xl="12" style="text-align: right">
          <span class="current-date-content">{{ currentDate }}</span>
        </a-col>
      </a-row>
      <a-row :gutter="15" class="huizong">
        <a-col :sm="24" :md="6" :xl="6">
          <div class="huizong-left">
            <div class="left-title">
              <div class="left-title-icon"></div>屠宰数量分析
            </div>
            <a-row class="left-content">
              <a-col :sm="24" :mc="12" :xl="12">
                <span class="left-content-text">今日</span>
                <span class="left-content-num">{{headerTotalObj.today}}</span>
              </a-col>
              <a-col :sm="24" :mc="12" :xl="12">
                <span class="left-content-text">昨日</span>
                <span class="left-content-num">{{headerTotalObj.yesterday}}</span>
              </a-col>
              <a-col :sm="24" :mc="12" :xl="12">
                <span class="left-content-text">本月</span>
                <span class="left-content-num">{{headerTotalObj.thismonth}}</span>
              </a-col>
              <a-col :sm="24" :mc="12" :xl="12">
                <span class="left-content-text">上月</span>
                <span class="left-content-num">{{headerTotalObj.lastmonth}}</span>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col :sm="24" :md="18" :xl="18">
          <div class="huizong-right">
            <a-row :gutter="12">
              <a-col :sm="12" :mc="6" :xl="6">
                <p class="right-text1 red">参考值{{headerTotalObj.sRe&&headerTotalObj.sRe.ckNum}}</p>
                <p class="right-text1 red">实际值{{headerTotalObj.sRe&&headerTotalObj.sRe.sjzNum}}</p>
                <p class="right-text2">水产出(元/只)</p>
              </a-col>
              <a-col :sm="12" :mc="6" :xl="6">
                <p class="right-text1 orange">参考值{{headerTotalObj.dRe&&headerTotalObj.dRe.ckNum}}</p>
                <p class="right-text1 orange">实际值{{headerTotalObj.dRe&&headerTotalObj.dRe.sjzNum}}</p>
                <p class="right-text2">电产出(元/只)</p>
              </a-col>
              <a-col :sm="12" :mc="6" :xl="6">
                <p class="right-text1 yellow">参考值{{headerTotalObj.zqRe&&headerTotalObj.zqRe.ckNum}}</p>
                <p class="right-text1 yellow">实际值{{headerTotalObj.zqRe&&headerTotalObj.zqRe.sjzNum}}</p>
                <p class="right-text2">蒸汽产出(元/只)</p>
              </a-col>
              <a-col :sm="12" :mc="6" :xl="6">
                <p class="right-text1 green">参考值{{headerTotalObj.rqRe&&headerTotalObj.rqRe.ckNum}}</p>
                <p class="right-text1 green">实际值{{headerTotalObj.rqRe&&headerTotalObj.rqRe.sjzNum}}</p>
                <p class="right-text2">燃气产出(元/只)</p>
              </a-col>
            </a-row>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" justify="start" :gutter="20" class="content">
        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>水能耗分析
            </div>
            <a-table
              :class="'my-index-table tytable1'"
              ref="table1"
              size="small"
              rowKey="id"
              :columns="sColumns"
              :dataSource="sConsume"
              :pagination="false"
              :scroll="{ y: 230 }"
            >
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              </template>
              <template slot="averageEnergy" slot-scope="text">
                <span class="green">{{text}}</span>
              </template>
              <template slot="tbNum" slot-scope="text,record">
                <span
                  :class="{green:record.state=='1',red:record.state=='2'}"
                >{{text}} {{record.state=='1'?"↑":record.state=='2'?"↓":""}}</span>
              </template>
            </a-table>
          </div>
        </a-col>

        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>蒸汽能耗分析
            </div>
            <a-table
              :class="'my-index-table tytable2'"
              ref="table2"
              size="small"
              rowKey="id"
              :columns="zqColumns"
              :dataSource="zqConsume"
              :pagination="false"
              :scroll="{ y: 230 }"
            >
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              </template>
              <template slot="averageEnergy" slot-scope="text">
                <span class="green">{{text}}</span>
              </template>
              <template slot="tbNum" slot-scope="text,record">
                <span
                  :class="{green:record.state=='1',red:record.state=='2'}"
                >{{text}} {{record.state=='1'?"↑":record.state=='2'?"↓":""}}</span>
              </template>
            </a-table>
          </div>
        </a-col>
        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>电能耗分析
            </div>
            <a-table
              :class="'my-index-table tytable4'"
              ref="table4"
              size="small"
              rowKey="id"
              :columns="dColumns"
              :dataSource="dConsume"
              :pagination="false"
              :scroll="{ y: 230 }"
            >
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              </template>
              <template slot="averageEnergy" slot-scope="text">
                <span class="green">{{text}}</span>
              </template>
              <template slot="tbNum" slot-scope="text,record">
                <span
                  :class="{green:record.state=='1',red:record.state=='2'}"
                >{{text}} {{record.state=='1'?"↑":record.state=='2'?"↓":""}}</span>
              </template>
            </a-table>
          </div>
        </a-col>
        <a-col :sm="24" :lg="12">
          <div class="content-item">
            <div class="item-title">
              <div class="item-title-icon"></div>燃气能耗分析
            </div>
            <a-table
              :class="'my-index-table tytable3'"
              ref="table3"
              size="small"
              rowKey="id"
              :columns="rqColumns"
              :dataSource="rqConsume"
              :pagination="false"
              :scroll="{ y: 230 }"
            >
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              </template>
              <template slot="averageEnergy" slot-scope="text">
                <span class="green">{{text}}</span>
              </template>
              <template slot="tbNum" slot-scope="text,record">
                <span
                  :class="{green:record.state=='1',red:record.state=='2'}"
                >{{text}} {{record.state=='1'?"↑":record.state=='2'?"↓":""}}</span>
              </template>
            </a-table>
          </div>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
import noDataPng from '@/assets/nodata.png'
import IndexHeader from './IndexHeader'
import { httpAction, getAction } from '@/api/manage'
import { formatDateTime, formatDate } from './format'
export default {
  name: 'dashuju',
  components: { IndexHeader },
  data() {
    return {
      loading: false,
      times: [], //头部时间检索条件
      textMaxLength: 8, //列表内容缩写时，最多字数
      dConsume: [], //电能耗分析列表
      rqConsume: [], //燃气能耗分析列表
      sConsume: [], //水能耗分析列表
      zqConsume: [], //蒸汽能耗分析列表
      currentDate: '', //当前时间
      intelvalObj: null, //当前时间定时器
      // 水分析列对象
      sColumns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'date',
          width: 80
        },
        {
          title: '总计费用',
          align: 'center',
          dataIndex: 'totalCost',
          scopedSlots: { customRender: 'ellipsisText' },
          width: 80
        },
        {
          title: '水（m³）',
          align: 'center',
          dataIndex: 'energyNum',
          width: 80
        },
        {
          title: '产量',
          align: 'center',
          dataIndex: 'yieldNum',
          width: 80
        },
        {
          title: '费用均耗/只',
          align: 'center',
          dataIndex: 'averageCost',
          width: 80
        },
        {
          title: '能源均耗/只',
          align: 'center',
          dataIndex: 'averageEnergy',
          scopedSlots: { customRender: 'averageEnergy' },
          width: 80
        },
        {
          title: '同比',
          align: 'center',
          dataIndex: 'tbNum',
          scopedSlots: { customRender: 'tbNum' },
          width: 80
        }
        // {
        //   // 涨跌状态 1是上涨，2是下跌
        //   title: '涨跌状态',
        //   align: 'center',
        //   dataIndex: 'state',
        //   width: 80
        // }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      // 蒸汽分析列对象
      zqColumns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'date',
          width: 80
        },
        {
          title: '总计费用',
          align: 'center',
          dataIndex: 'totalCost',
          scopedSlots: { customRender: 'ellipsisText' },
          width: 80
        },
        {
          title: '蒸汽（m³）',
          align: 'center',
          dataIndex: 'energyNum',
          width: 80
        },
        {
          title: '产量',
          align: 'center',
          dataIndex: 'yieldNum',
          width: 80
        },
        {
          title: '费用均耗/只',
          align: 'center',
          dataIndex: 'averageCost',
          width: 80
        },
        {
          title: '能源均耗/只',
          align: 'center',
          dataIndex: 'averageEnergy',
          scopedSlots: { customRender: 'averageEnergy' },
          width: 80
        },
        {
          title: '同比',
          align: 'center',
          dataIndex: 'tbNum',
          scopedSlots: { customRender: 'tbNum' },
          width: 80
        }
        // {
        //   // 涨跌状态 1是上涨，2是下跌
        //   title: '涨跌状态',
        //   align: 'center',
        //   dataIndex: 'state',
        //   width: 80
        // }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      // 电分析列对象
      dColumns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'date',
          width: 80
        },
        {
          title: '总计费用',
          align: 'center',
          dataIndex: 'totalCost',
          scopedSlots: { customRender: 'ellipsisText' },
          width: 80
        },
        {
          title: '电（kw）',
          align: 'center',
          dataIndex: 'energyNum',
          width: 80
        },
        {
          title: '产量',
          align: 'center',
          dataIndex: 'yieldNum',
          width: 80
        },
        {
          title: '费用均耗/只',
          align: 'center',
          dataIndex: 'averageCost',
          width: 80
        },
        {
          title: '能源均耗/只',
          align: 'center',
          dataIndex: 'averageEnergy',
          scopedSlots: { customRender: 'averageEnergy' },
          width: 80
        },
        {
          title: '同比',
          align: 'center',
          dataIndex: 'tbNum',
          scopedSlots: { customRender: 'tbNum' },
          width: 80
        }
        // {
        //   // 涨跌状态 1是上涨，2是下跌
        //   title: '涨跌状态',
        //   align: 'center',
        //   dataIndex: 'state',
        //   width: 80
        // }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      // 燃气分析列对象
      rqColumns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'date',
          width: 80
        },
        {
          title: '总计费用',
          align: 'center',
          dataIndex: 'totalCost',
          scopedSlots: { customRender: 'ellipsisText' },
          width: 80
        },
        {
          title: '燃气（m³）',
          align: 'center',
          dataIndex: 'energyNum',
          width: 80
        },
        {
          title: '产量',
          align: 'center',
          dataIndex: 'yieldNum',
          width: 80
        },
        {
          title: '费用均耗/只',
          align: 'center',
          dataIndex: 'averageCost',
          width: 80
        },
        {
          title: '能源均耗/只',
          align: 'center',
          dataIndex: 'averageEnergy',
          scopedSlots: { customRender: 'averageEnergy' },
          width: 80
        },
        {
          title: '同比',
          align: 'center',
          dataIndex: 'tbNum',
          scopedSlots: { customRender: 'tbNum' },
          width: 80
        }
        // {
        //   // 涨跌状态 1是上涨，2是下跌
        //   title: '涨跌状态',
        //   align: 'center',
        //   dataIndex: 'state',
        //   width: 80
        // }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      headerTotalObj: {} //头部统计数据对象
    }
  },
  created() {
    this.mock()
    this.getSummaryAnalysisQuerye()
  },
  mounted() {
    this.currentDate = formatDateTime(new Date())
    this.intelvalObj = setInterval(() => {
      this.currentDate = formatDateTime(new Date())
    }, 1000)
  },
  methods: {
    //加载头部统计及汇总数据
    getSummaryAnalysisQuerye() {
      getAction('/summaryAnalysis/querye').then(res => {
        if (res.success) {
          this.headerTotalObj = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 加载页面列表数据
    mock() {
      getAction('/summaryAnalysis/analysysList', {
        warningTime_begin: this.times && this.times.length > 0 ? formatDate(new Date(this.times[0])) : '',
        warningTime_end: this.times && this.times.length > 1 ? formatDate(new Date(this.times[1])) : ''
      }).then(res => {
        if (res.success) {
          console.log('res', res)
          this.dConsume = res.result.dConsume
          this.rqConsume = res.result.rqConsume
          this.sConsume = res.result.sConsume
          this.zqConsume = res.result.zqConsume
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  },
  beforeDestroy() {
    clearInterval(this.intelvalObj)
    this.intelvalObj = null
  }
}
</script>

<style lang="less" scoped>
.index-page {
  padding: 12px 12px 0;
  height: 1016px;
  background-color: rgba(0, 0, 59, 1);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  p {
    margin: 0;
    padding: 0;
  }
  .current-date {
    width: 100%;
    position: absolute;
    top: 70px;
    .current-date-span {
      font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #6e98fc;
      line-height: 22px;
      margin-right: 10px;
    }
    /deep/.ant-input {
      background-color: rgba(0, 102, 153, 0.498039215686275);
      box-sizing: border-box;
      border: 1px solid rgba(0, 102, 153, 1);
      border-radius: 4px;
      font-size: 12px;
      color: #6e98fc;
      text-align: left;
      line-height: 22px;
    }
    /deep/.ant-calendar-range-picker-separator {
      color: #6e98fc;
    }
    /deep/.ant-calendar-picker-clear {
      background: transparent;
      color: #fff;
    }
    .current-date-content {
      font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      color: #6e98fc;
      line-height: 22px;
    }
  }
  .huizong {
    position: relative;
    top: -15px;
    .huizong-left {
      height: 121px;
      background-color: rgba(15, 30, 75, 0.749019607843137);
      box-sizing: border-box;
      border: 1px solid rgba(0, 102, 153, 1);
      border-radius: 4px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      padding: 10px;
      .left-title {
        font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        color: #b6d7ff;
        line-height: 28px;
        display: flex;
        align-items: center;
        .left-title-icon {
          width: 12px;
          height: 14px;
          background: url('../../assets/images/index/u12.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 8px;
        }
      }
      .left-content {
        /deep/.ant-col {
          padding-left: 30px;
          font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 20px;
          .left-content-text {
            font-size: 14px;
            color: #b6d7ff;
            margin-right: 10px;
          }
          .left-content-num {
            color: #d4bb0c;
          }
        }
        /deep/.ant-col:nth-child(2) {
          .left-content-num {
            color: #03d58b;
          }
        }
        /deep/.ant-col:nth-child(3),
        /deep/.ant-col:nth-child(4) {
          .left-content-num {
            color: #387afc;
          }
        }
      }
    }
    .huizong-right {
      height: 121px;
      background-color: rgba(15, 30, 75, 0.749019607843137);
      box-sizing: border-box;
      border: 1px solid rgba(0, 102, 153, 1);
      border-radius: 4px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      padding: 18px;
      font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
      font-weight: 400;
      font-style: normal;
      text-align: center;
      line-height: 28px;
      .right-text1 {
        font-size: 16px;
      }
      .right-text1.red {
        color: #f0484d;
      }
      .right-text1.orange {
        color: #ff884e;
      }
      .right-text1.yellow {
        color: #d4bb0c;
      }
      .right-text1.green {
        color: #03d58b;
      }
      .right-text2 {
        font-size: 14px;
        color: #b6d7ff;
      }
    }
  }
  .content {
    position: relative;
    top: -10px;
    .content-item {
      height: 331px;
      background: url('../../assets/images/index/u23.png') no-repeat;
      background-size: 100% 100%;
      padding: 20px 13px;
      box-sizing: border-box;
      margin-bottom: 15px;
      .item-title {
        display: flex;
        align-items: center;
        font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        color: #b6d7ff;
        line-height: 28px;
        margin-bottom: 10px;
        .item-title-icon {
          width: 12px;
          height: 14px;
          background: url('../../assets/images/index/u12.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 10px;
        }
      }
      .my-index-table {
        /deep/.ant-table-small,
        /deep/.ant-table-tbody > tr > td,
        /deep/.ant-table-thead > tr > th {
          border: none;
        }
        /deep/.ant-table-thead > tr > th {
          font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          color: #6e98fc;
          line-height: 22px;
        }
        /deep/.ant-table-tbody > tr > td {
          font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          color: #b6d7ff;
          line-height: 28px;
        }
        /deep/.ant-table-scroll {
          overflow: hidden;
        }
        /deep/.ant-table-placeholder {
          background: transparent;
          border: none;
          .ant-empty-description {
            color: #b6d7ff;
          }
          .ant-empty-image {
            display: none;
          }
        }
        /deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
          background: transparent;
        }
        /deep/.ant-table-header {
          overflow: hidden !important;
        }
        /deep/.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
          background: transparent;
        }
        /deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header::-webkit-scrollbar {
          border: none;
        }
        /deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header::-webkit-scrollbar-track {
          background: transparent;
        }
        /deep/.ant-table-body::-webkit-scrollbar-track {
          background: rgba(0, 0, 0, 0.3);
          border-radius: 5px;
        }
        /deep/.ant-table-body::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.6);
          border-radius: 5px;
        }
        .green {
          color: #03d58b;
        }
        .red {
          color: #f0484d;
        }
      }
    }
  }
}
</style>